<template>
  <div class="page-content">
    <div class="page-content-left">
      <div class="tips">
        <div>Welcome to RUIX.</div>
        <div>Please start the</div>
        <div>serial number</div>
        <div>verification.</div>
      </div>

      <img src="../assets/ruix-logo.png" class="ruix-logo" />
    </div>
    <div class="page-content-right">
      <div class="right-content">
        <div class="content-title">Please enter the serial number</div>
        <div class="form-class">
          <a-input
            v-model:value="serialNumber"
            placeholder="serial number"
            class="input-class"
            @input="showError = false"
          />
          <div class="err-class" v-if="showError">{{ errorMsg }}</div>
        </div>
        <a-button class="submit-btn" @click="onSubmit" :loading="loading" :disabled="loading">Submit</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { useRouter } from "vue-router";
import { reactive, defineComponent, toRefs } from "vue";
import serialData from "../utils/serialData";
export default defineComponent({
  components: {},
  setup() {
    const dataProps = reactive({
      serialNumber: "",
      showError: false,
      errorMsg: "",
      serialData: serialData,
      loading: false,
    });
    const router = useRouter();

    const onSubmit = () => {
      if (
        !dataProps.serialNumber.trim() ||
        dataProps.serialNumber.trim().length === 0 ||
        dataProps.serialNumber.trim() === "" ||
        dataProps.serialNumber === null ||
        dataProps.serialNumber === undefined ||
        dataProps.serialNumber === "undefined"
      ) {
        dataProps.showError = true;
        dataProps.errorMsg = "Serial Number Not Entered";
      } else {
        dataProps.loading = true;
        setTimeout(() => {
          dataProps.loading = false;
          const tempSerialNumber = dataProps.serialNumber.trim().toUpperCase();
          if (dataProps.serialData.indexOf(tempSerialNumber) !== -1) {
            dataProps.showError = false;
            const serialNumber = dataProps.serialData.find((item) => item === tempSerialNumber);
            router.push(`/detail?serialNumber=${serialNumber}`);
          } else {
            dataProps.showError = true;
            dataProps.errorMsg = "Serial Number Error";
          }
        }, 500);
      }
    };
    return {
      ...toRefs(dataProps),
      onSubmit,
    };
  },
});
</script>
<style lang="less" scoped>
.page-content {
  display: flex;
  background-color: #2f333a;
  width: 100%;
  height: 100%;
  min-width: 1080px;
}
.page-content-left {
  padding-left: 105px;
  color: #fff;
  margin: auto;
  .tips {
    width: 321px;
    height: 187px;
    font-family: PingFang SC;
    font-size: 32px;
    font-weight: 500;
    line-height: 45px;
    letter-spacing: 0.04em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }
  .ruix-logo {
    width: 125.21px;
    height: 36px;
    margin-top: 30px;
  }
}
.page-content-right {
  width: 825.35px;
  height: 100%;
  background-color: #fff;
  border-radius: 50px 0px 0px 50px;
  align-content: center;
  .right-content {
    margin: auto;
    width: 435px;

    .content-title {
      font-family: PingFang SC;
      font-size: 30px;
      font-weight: 500;
      line-height: 42px;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }
    .form-class {
      width: 435px;
      height: 132px;
    }
    .input-class {
      height: 57px;
      margin-top: 35px;
    }
    .err-class {
      font-family: Poppins;
      font-size: 13px;
      font-weight: 400;
      line-height: 19.5px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #e73c17;
      margin-top: 16px;
      text-align: right;
      height: 20px;
    }
    .submit-btn {
      height: 54px;
      margin-top: 50px;
      border: 0;
      width: 435px;
      background-color: #e73c17;
      color: #fff;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 500;
      line-height: 22.4px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }
  }
}
</style>
